<template>
  <view class="progress_box">
    <!-- <canvas class="progress_bg" :style="{width:usize,height:usize}" canvas-id="cpbg"></canvas>
    <canvas class="progress_bar" :style="{width:usize,height:usize}" canvas-id="cpbar"></canvas> -->
	<view class="progress_bg" :style="{width:usize,height:usize}"></view>
	<view class="progress_bar mc-flex-vcenter mc-flex-center" :style="{width:usize,height:usize}">
		<image src="../../static/images/count_down_bg.png" :style="{width:usize,height:usize}"></image>
	</view>
    <view class="progress_txt">
      <view :style="{fontSize:fsize,color:fontColor}" class="progress_info">{{ downTime }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 3
    },
    size: {
      type: Number,
      default: 70
    },
    fontSize: {
      type: Number,
      default: 52
    },
    fontColor: {
      type: String,
      default: '#555555'
    }
  },
  data() {
    return {
	  initTime:0, //创建时间
      intervalTime: 0,  //间隔时间
      timer: null
    };
  },
  computed: {
    usize() {
      return this.size * 2 + 'px';
    },
    fsize() {
      return uni.upx2px(this.fontSize) + 'px';
    },
	downTime() {
		return this.total - parseInt(this.intervalTime);
	}
  },
  methods: {
    drawProgressbg: function() {
      // 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
      var ctx = uni.createCanvasContext('cpbg', this);
      ctx.setLineWidth(12); // 设置圆环的宽度
      ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
      ctx.setLineCap('round'); // 设置圆环端点的形状
      ctx.beginPath(); //开始一个新的路径
      ctx.arc(
        this.size,
        this.size,
        this.size - 10,
        0 * Math.PI,
        2 * Math.PI,
        false
      );
      //设置一个原点(110,110)，半径为100的圆的路径到当前路径
      ctx.stroke(); //对当前路径进行描边
      ctx.draw();
    },
    drawCircle: function(step) {
      var ctx = uni.createCanvasContext('cpbar', this);
      // 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
      var gradient = ctx.createLinearGradient(28, 55, 192, 55);
      gradient.addColorStop('0', '#FFA68C');
      gradient.addColorStop('1.0', '#FF3B1D');
      ctx.setLineWidth(12);
      ctx.setStrokeStyle(gradient);
      ctx.setLineCap('round');
      ctx.beginPath();
      // 参数step 为绘制的百分比
      let bar;
      bar = (step / this.total) * 2;
      ctx.arc(
        this.size,
        this.size,
        this.size - 10,
        (2 - bar) * Math.PI,
        2 * Math.PI,
        false
      );
      ctx.stroke();
      ctx.draw();
    },
    countDown() {
      // this.drawCircle(this.total);
	  this.initTime = new Date().getTime();
      this.timer = setInterval(() => {
        this.intervalTime=parseInt((new Date().getTime() - this.initTime) / 1000);;
        // this.intervalTime++;
        // this.drawCircle(this.downTime);
        if (this.total <= this.intervalTime) {
          clearInterval(this.timer);
          this.timer = null;
          this.$emit('callback');
        }
      }, 1000);
    }
  },
  mounted() {
    this.drawProgressbg();
    this.countDown();
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer);
    this.timer = null;
    console.log('beforeDestroy');
  },
  destroyed() {
    // if (this.timer) {
    //   clearInterval(this.timer);
    //   this.timer = null;
    // }
  }
};
</script>

<style>
.progress_box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-90deg);
}
.progress_bg {
  position: absolute;
  width: 140px;
  height: 140px;
}
.progress_bar {
  width: 140px;
  height: 140px;
}
.progress_txt {
  position: absolute;
  color: #999999;
}
.progress_info {
  font-size: 117upx;
  letter-spacing: 2upx;
  font-size: 52upx;
  color: #fd3843;
  transform: rotate(90deg);
}
.progress_dot {
  width: 16upx;
  height: 16upx;
  border-radius: 50%;
  background-color: #fb9126;
}

.progress_bar image{
	width: 140px;
	height: 140px;
	-webkit-animation:rotate 1.2s linear infinite;
}


 
@-webkit-keyframes rotate{

	0%{-webkit-transform:rotate(0deg);}

	100%{-webkit-transform:rotate(360deg);}
	
}
</style>
